<template>
  <!--头部固定组件-->
  <div class="my_header">
    <div class="logo">
      <router-link to="#">
        <el-image
            :src="loadAssetsImage('logo.png')"
            fit="cover">

        </el-image>
        <h2>Nova Music</h2>
      </router-link>
    </div>
    <div class="nav">
      <router-link :to="{name:'main-page'}" :active-class="navActive">首页</router-link>
      <router-link :to="{
                    name:'find-page',
                    params:{
                        level: 0,
                        name: '全部歌单'
                    }
                }" :active-class="navActive">发现
      </router-link>
      <router-link to="###" :active-class="navActive">音乐库</router-link>
    </div>
    <div class="search">
      <div>
        <SearchInput/>
      </div>
      <div>
        <div @click="showFun">
          <el-avatar size="large"
                     :title="userInfo.name"
                     :src="userInfo.src"
                     fit="fill"
                     icon="el-icon-user-solid">

          </el-avatar>
        </div>
        <ul class="login"
            v-show="isShowFun"
            @click="userFun">
          <li>
            <div data-fun="settings">
              <font-awesome-icon icon="fas fa-cog"/>
              <span>设置</span>
            </div>
          </li>
          <li>
            <div data-fun="login" v-show="!userInfo.isLogin">
              <font-awesome-icon icon="fas fa-sign-in-alt"/>
              <span>登录</span>
            </div>
            <div data-fun="unLogin" v-show="userInfo.isLogin">
              <font-awesome-icon icon="fas fa-sign-in-alt"/>
              <span>登出</span>
            </div>
          </li>
          <li class="my-divider"></li>
          <li>
            <div data-fun="gitee">
              <el-image
                  :src="loadAssetsIcon('gitee.png')"
                  fit="cover">

              </el-image>
              <span>Gitee仓库</span>
            </div>
          </li>
          <li>
            <div data-fun="github">
              <font-awesome-icon icon="fab fa-github"/>
              <span>Github仓库</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import SearchInput from "@/minicomponents/SearchInput.vue";
import {publicFun} from "@/mixin";
import {SHOWLOGINFORM} from "@/http/constant";
import {mapState} from "vuex";
import {isLogin} from "@/http/tools";
import {getLoginStatus} from "@/http";

export default {
  name: "PlayerHeader",
  components: {SearchInput},
  mixins: [publicFun],
  data() {
    return {
      navActive: 'active',
      isShowFun: false
    }
  },
  methods: {
    // 头像功能框点击显示或隐藏
    showFun() {
      this.isShowFun = !this.isShowFun
    },
    // 事件委托监听功能按钮
    userFun(e) {
      e.stopPropagation()
      const {dataset: {fun}, parentNode} = e.target
      // 登录框的显示和隐藏 parentNode.dataset.fun是防止点击到子元素的时候无法触发事件
      if (fun === 'login' || parentNode.dataset.fun === 'login') {
        this.$bus.$emit(SHOWLOGINFORM)
      } else if (fun === 'gitee' || parentNode.dataset.fun === 'gitee') {
        window.open("https://gitee.com/wanglei2351482230/nova_music", "_blank")
      } else if (fun === 'unLogin' || parentNode.dataset.fun === 'unLogin') {
        this.$store.dispatch('unLogin')
      }
      // 显示登录框后就隐藏选项卡
      this.showFun()
    }
  },
  computed: {
    ...mapState(['userProfile']),
    userInfo() {
      let userInfo = {
        id: '',
        src: '',
        name: '',
        isLogin: false
      }
      if (isLogin()) {
        const {userId, avatarUrl, nickname} = this.userProfile
        userInfo = {
          id: userId,
          src: avatarUrl,
          name: nickname,
          isLogin: true
        }
      }
      return userInfo
    }
  }
}
</script>

<style scoped lang="less">
@import "../assets/less/common";

.my_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 @containerPadding;
  background-color: rgba(255, 255, 255, .5);
  //实现毛玻璃效果，但是需要背景颜色半透明
  backdrop-filter: saturate(180%) blur(25px);
  height: @headerHeight;

  //logo部分
  .logo {
    > a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 10vw;
      height: 100%;

      .el-image {
        width: 2.8vw;
        height: 2.8vw;
      }
    }
  }

  //导航部分
  .nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 20vw;
    height: 100%;
    font-weight: 700;
    font-size: 18px;
    margin-left: -2vw;

    a {
      padding: 5px 10px;
      border-radius: 10px;
      cursor: pointer;

      &:hover {
        background-color: @mouseHover;
      }
    }

    .active {
      color: @mainColor;
    }
  }

  //搜索框部分
  .search {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 12vw;
    height: @headerHeight;

    .el-avatar {
      &:hover {
        background-color: @metaphorFont;
        cursor: pointer;
      }
    }

    .login {
      position: fixed;
      background-color: white;
      right: 5vw;
      top: 3vh;
      padding: .5vh .5vw;
      font-size: 0.8vw;
      font-weight: 700;
      border-radius: 10px;
      box-shadow: 0 3px 5px 3px rgba(0, 0, 0, .1);

      li:not(:nth-child(3)) {
        border-radius: 7px;
        cursor: pointer;

        > div {
          display: flex;
          align-items: center;
          height: 1.5vw;
          width: 100%;
          padding: .5vh .5vw;

          > .el-image {
            width: .8vw;
            height: .8vw;
          }

          span {
            margin-left: .4vw;
            font-size: 0.5vw;
          }
        }

        &:hover {
          background-color: @mainColorOpacity;
          color: @mainColor;
        }
      }

      li:nth-child(3) {
        border: 0.5px solid @mouseHover;
        margin: .5vh 0;
      }
    }
  }
}
</style>